var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var x,y;
var a,b;
var l = 10;
var w=l*3;h=l*1;
var step = 10;
var speed = 5;
var score = 0;
function player(x,y,color){
    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.rect(x*step,y*step,w,h);
    ctx.fill();
    ctx.closePath();
}
function anemy(a,b,color){
    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.rect(a*speed,b*speed,l,l);
    ctx.fill();
    ctx.closePath();
}
function fillText(x,y,fontcolor,fontstyle,text,align){
    ctx.beginPath();
    ctx.shadowOffsetX=0;
    ctx.shadowOffsetY=0;
    ctx.shadowBlur=0;
    ctx.fillStyle=fontcolor;
    ctx.font=fontstyle;
    ctx.textAlign="" + align + "";
    ctx.textBaseline="center";
    text = ""+text+"";
    ctx.fillText(text,x,y);
    ctx.closePath();
}
// 初始化
function ready(){
    x = c.width/2/step;
    y=(c.height/step)-1;
    a=0;
    b=0;
    score = 0;
    player(x,y,"black");
    fillText(5,10,'black','bold','SCORE : ' + score,'left');
}ready();

// 操作
document.onkeydown=function(e) {  //对整个页面文档监听
    var keyNum = window.event ? e.keyCode : e.which;  //获取被按下的键值
    //console.log(keyNum);
    if(keyNum==37 || keyNum==65) {
        console.log('左');
        if(x>0) {
            x--;
        }
    }
    // if(keyNum==38 || keyNum==87) {
    //     console.log('上');
    //     if(y>0) {
    //         y--;
    //     }
    // }
    if(keyNum==39 || keyNum==68) {
        console.log('右');
        if((x+1)*step<c.width){
            x++;
        }
    }
    // if(keyNum==40 || keyNum==83) {
    //     console.log('下');
    //     if((y+1)*step<c.height){
    //         y++;
    //     }
    // }
};

// 定时器
var time1 = setInterval(function(){
    b++;
    if(b*speed>c.height){
        b=0;
        a= parseInt(30*Math.random());
    }
},100);
var timer = setInterval(function(){
    // 碰撞检测
    // console.log('a:' + a +','+'b:' + b);
    // console.log('x:' + x +','+'y:' + y);
    console.log('b:' + b);
    if(a<(x+w)&&a>=x&&b>=y&&b<(y+h)) {
        console.log('碰撞');
        score++;
        b=0;
        a = parseInt(30*Math.random());
    }
    ctx.clearRect(0,0,c.width,c.height);
    player(x,y,"black");
    anemy(a,b,"red");
    fillText(5,10,'black','bold','SCORE : ' + score,'left')
},100);